import { Col, Row, Flex, Button, Checkbox, Form, Input } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import './index.scss'

const Login = () => {
  const initForm = {
    username: '',
    password: '',
    remember: true
  }
  window.storage.set('token', 'test------------')
  const onFinish = (values) => {
    console.log(values)
  }
  return <Row className='web-login'>
    <Col span={13}>
      <div className='web-login-left' />
    </Col>
    <Col span={11}>
      <Flex align='center' className='web-login-right'>
        <div className='web-login-right-cont'>
          <h1>租赁管理系统</h1>
          <Form
            name="normal_login"
            className="web-login-right-cont-form"
            initialValues={initForm}
            onFinish={onFinish}
            size='large'
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your Username!'
                }
              ]}
            >
              <Input className='form-input' prefix={<UserOutlined />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your Password!'
                }
              ]}
              >
              <Flex>
                <Input.Password
                  className='form-input'
                  prefix={<LockOutlined/>}
                  placeholder="Password"
                  autoComplete="false"
                />
                <div className='code'>验证码</div>
              </Flex>
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
            </Form.Item>
            <Form.Item>
              <Button block size='large' type="primary" htmlType="submit" className="login-form-button">
                Log in
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Flex>
    </Col>
  </Row>
}
export default Login